<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="650"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px"
  >
    <a-tabs>
        <a-tab-pane key="0" tab="源数据项">
            源数据项的数据取值，来自于核算数据填报。源数据项是公式组建的核心参数
        </a-tab-pane>
      <a-tab-pane key="1" tab="参数推荐值">
        <a-row
          >您可以从系统内置的行业参数推荐值库中选择您需要用到的参数。如未能找到您需要的参数，您也可以在“自定义数值”标签中自行录入。</a-row
        >
        <a-row class="EmissionFactorModal">
          <a-col :span="6">
            <a-select
              show-search
              placeholder="参数分类"
              style="width: 100%"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
            >
              <a-select-option value="化工产品"> 化工产品 </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-select
              show-search
              placeholder="子分类"
              style="width: 100%"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
            >
              <a-select-option value="化工产品"> 化工产品 </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-input placeholder="关键字"></a-input>
          </a-col>
          <a-col :span="5">
            <a>+添加参数</a>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2" tab="自定义数值">
        您可以自行录入一些公式中需要用到的参数值
      </a-tab-pane>
      <a-tab-pane key="3" tab="排放因子">
        您可以从系统内置的因子库中选择您需要用到的因子。如未能找到您需要的因子，您也可以自行录入因子。
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>
<script>
import {
  queryTreeListForRole,
  queryRolePermission,
  saveRolePermission,
} from "@/api/api";

export default {
  name: "RoleModal",
  components: {},
  data() {
    return {
      roleId: "",
      treeData: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: true,
      title: "参数备用池",
      visible: false,
      loading: false,
      selectedKeys: [],
    };
  },
  methods: {
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        this.selectedKeys = id;
      }
      this.$refs.datarule.show(this.selectedKeys[0], this.roleId);
    },
    onCheck(o) {
      if (this.checkStrictly) {
        this.checkedKeys = o.checked;
      } else {
        this.checkedKeys = o;
      }
    },
    show(roleId) {
      this.roleId = roleId;
      this.visible = true;
    },
    close() {
      this.reset();
      this.$emit("close");
      this.visible = false;
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys;
      this.autoExpandParent = false;
    },
    reset() {
      this.expandedKeysss = [];
      this.checkedKeys = [];
      this.defaultCheckedKeys = [];
      this.loading = false;
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys;
    },
    closeAll() {
      this.expandedKeysss = [];
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys;
    },
    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = [];
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false;
      } else if (v == 2) {
        this.checkStrictly = true;
      }
    },
    handleCancel() {
      this.close();
    },
    handleSubmit(exit) {
      let that = this;
      let params = {
        roleId: that.roleId,
        permissionIds: that.checkedKeys.join(","),
        lastpermissionIds: that.defaultCheckedKeys.join(","),
      };
      that.loading = true;
      //   console.log("请求参数：",params);
      saveRolePermission(params).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loading = false;
          if (exit) {
            that.close();
          }
        } else {
          that.$message.error(res.message);
          that.loading = false;
          if (exit) {
            that.close();
          }
        }
        this.loadData();
      });
    },
    loadData() {
      queryTreeListForRole().then((res) => {
        this.treeData = res.result.treeList;
        this.allTreeKeys = res.result.ids;
        queryRolePermission({ roleId: this.roleId }).then((res) => {
          this.checkedKeys = [...res.result];
          this.defaultCheckedKeys = [...res.result];
          this.expandedKeysss = this.allTreeKeys;
          //   console.log(this.defaultCheckedKeys)
        });
      });
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.loadData();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.EmissionFactorModal {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>